<template>
  <div class="hello">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form ref="form"  :model="model1" label-width="120px">
          <el-form-item label="结束日期：">
            <el-input v-model="model1.day" placeholder="请输入结束日期"></el-input>
          </el-form-item>
          <el-form-item label="续费月份：">
            <el-input v-model="model1.month" placeholder="请输入续费月份"></el-input>
          </el-form-item>
          <el-form-item label="续费天数：">
            <el-input v-model="model1.tian" placeholder="请输入续费天数"></el-input>
          </el-form-item>
          <el-form-item label="是否产权：">
            <el-switch
                v-model="model1.bukuan"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirmBtn">生成</el-button>
          </el-form-item>
        </el-form>
        <el-form  :model="model1" class="demo-form-inline" label-width="120px">
          <el-form-item label="过期后续费：">
            <el-switch
                disabled
                v-model="model1.guoqi"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item label="生成新的日期：" >
            <el-row :gutter="20">
              <el-col :span="19">
                <el-input v-model="model1.result" placeholder="生成新的日期"></el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="copyHandle">复制</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

  data() {

    return {
      model1: {
        day: '',
        month: '',
        tian: '',
        bukuan: true,
        guoqi: false,
        result: ''
      },
      dayStart: '',
      dayEnd: ''
    }
  },
  computed: {},
  onLoad() {

  },
  methods: {
    // 判断是否是最后一天
    isLastDayOfMonth(date) {
      return this.$dayjs(date).isSame(this.$dayjs(date).endOf('month'), 'day');
    },
    copyHandle() {
      if (!navigator.clipboard) {
        return new Promise((resolve) => {
          var tempInput = document.createElement("textarea");
          tempInput.value = this.model1.result;
          document.body.appendChild(tempInput);
          tempInput.select();
          document.execCommand("copy");
          document.body.removeChild(tempInput);
          resolve()
          this.$message.success('复制成功')
        })

      } else {
        navigator.clipboard.writeText(this.model1.result)
        this.$message.success('复制成功')
      }
    },
    confirmBtn() {
        if (!this.model1.day){
          this.$message.warning('请输入结束日期再生成')
          return;
        }
        // 需要补款
        if (this.model1.bukuan) {
          let newDayStart = this.$dayjs(this.model1.day).add(1, 'day').format('YYYY-MM-DD');

          let newDayEnd = this.$dayjs(this.model1.day).format('YYYY-MM-DD');
          // 增加月份
          if (this.model1.month) {
            newDayEnd = this.$dayjs(newDayEnd).add(this.model1.month, 'month').format('YYYY-MM-DD')
            if (this.isLastDayOfMonth(this.model1.day)) { // 如果是当前日期是最后一天需要到最后一天
              newDayEnd = this.$dayjs(newDayEnd).endOf('month').format('YYYY-MM-DD')
            }
          }
          // 增加天数
          if (this.model1.tian) {
            newDayEnd = this.$dayjs(newDayEnd).add(this.model1.tian, 'day').format('YYYY-MM-DD');
          }
          console.log(newDayStart, newDayEnd)
          this.model1.result = this.$dayjs(newDayStart).format('YYYY.M.D') + '-' + this.$dayjs(newDayEnd).format('YYYY.M.D');
        } else {
          this.model1.guoqi = this.$dayjs().isAfter(this.model1.day, 'day');
          if (this.model1.guoqi) {
            let newDayStart = this.$dayjs().format('YYYY-MM-DD');

            let newDayEnd = this.$dayjs().subtract(1, 'day').format('YYYY-MM-DD');
            if (this.model1.month) {
              newDayEnd = this.$dayjs(newDayEnd).add(this.model1.month, 'month').format('YYYY-MM-DD')
              if (this.isLastDayOfMonth()) { // 如果是当前日期是最后一天需要到最后一天
                newDayEnd = this.$dayjs(newDayEnd).endOf('month').format('YYYY-MM-DD')
              }
            }
            // 增加天数
            if (this.model1.tian) {
              newDayEnd = this.$dayjs(newDayEnd).add(this.model1.tian, 'day').format('YYYY-MM-DD');
            }
            console.log(newDayStart, newDayEnd)
            this.model1.result = this.$dayjs(newDayStart).format('YYYY.M.D') + '-' + this.$dayjs(newDayEnd).format('YYYY.M.D');
          } else {
            let newDayStart = this.$dayjs(this.model1.day).add(1, 'day').format('YYYY-MM-DD');

            let newDayEnd = this.$dayjs(this.model1.day).format('YYYY-MM-DD');
            // 增加月份
            if (this.model1.month) {
              newDayEnd = this.$dayjs(newDayEnd).add(this.model1.month, 'month').format('YYYY-MM-DD')
              if (this.isLastDayOfMonth(this.model1.day)) { // 如果是当前日期是最后一天需要到最后一天
                newDayEnd = this.$dayjs(newDayEnd).endOf('month').format('YYYY-MM-DD')
              }
            }
            // 增加天数
            if (this.model1.tian) {
              newDayEnd = this.$dayjs(newDayEnd).add(this.model1.tian, 'day').format('YYYY-MM-DD');
            }
            console.log(newDayStart, newDayEnd)
            this.model1.result = this.$dayjs(newDayStart).format('YYYY.M.D') + '-' + this.$dayjs(newDayEnd).format('YYYY.M.D');
          }
        }


      }
    }
  }
</script>

<style scoped>
</style>
